<template>
	<div class="market">
		<header>营销管理</header>
		<div class="contents">
			<div class="conditions">
				<div class="condition_1">
					<div class="market_type">
						<span>营销类型：</span>
						<el-select clearable v-model="value1" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<div class="status">
						<span>状态：</span>
						<el-select clearable v-model="value2" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</div>
					<el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
					<el-button @click.native="resets">重置</el-button>
				</div>
				<div class="condition_2">
					<div class="keywords">
						<span>关键字：</span>
						<el-input v-model.trim="input1" placeholder="请输入内容" style="width:300px;"></el-input>
					</div>
					<div class="stores">
						<span>门店：</span>
						<el-select :disabled="disA" clearable v-model="value3" placeholder="请选择" style="width:300px;">
							<el-option v-for="item in options3" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
						</el-select>
					</div>
				</div>
				<div class="add_market">
					<el-button type="danger" style="background:#e7251a;" @click.native="goAdd">新增营销</el-button>
				</div>
				<div class="selected" v-if="selectArr.length>0">
					<p>
						<img src="../../assets/images/market/select2.png" alt="" />
						<span>已选择&nbsp;
							<label>{{selectArr.length}}</label>&nbsp;项</span>
					</p>
				</div>
				<div class="tables">
					<el-table v-loading="loading" :data="actList" style="width: 100%;" @selection-change="handleSelectionChange">
						<el-table-column label="编号" type="index" width="50"> </el-table-column>
						<el-table-column prop="ACT_NAME" label="营销名称" width="150"> </el-table-column>
						<el-table-column prop="SHOP_NAME" label="门店" width="280"> </el-table-column>
						<el-table-column prop="ACT_TYPE" label="营销类型" width="150">
							<template slot-scope="scope">
								<span v-if="scope.row.ACT_TYPE==4180228">买一送一</span>
								<span v-if="scope.row.ACT_TYPE==4180225">买二送一</span>
							</template>
						</el-table-column>
						<el-table-column prop="IS_USE" label="状态" width="100">
							<template slot-scope="scope">
								<span>{{ scope.row.IS_USE == 1 ? '启用' : '停用'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="START_TIME" label="开始时间" width="220">
							<template slot-scope="scope">
								<span>{{ scope.row.START_TIME | filterTimess}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="END_TIME" label="结束时间" width="220">
							<template slot-scope="scope">
								<span>{{ scope.row.END_TIME | filterTimess}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="options" label="操作" width="220">
							<template slot-scope="scope">
								<span class="editStatus" @click="editStatus(scope.row.CAFE_ACTIVITY_Id,scope.row.IS_USE)">{{ scope.row.IS_USE == 1 ? '停用' : '启用'}}</span>
								<span class="edits" @click="goEdits(scope.row.CAFE_ACTIVITY_Id)">编辑</span>
								<span class="dels" @click="goDels(scope.row.CAFE_ACTIVITY_Id)">删除</span>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[6,8,10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="datas.COUNT"> </el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { asyncRouterMap } from '@/router/index'
	import { getCafeActivityList } from '@/api/market'
	import { get4SCafeShopList } from '@/api/market'
	import { updateIsUseByCafeActivityId } from '@/api/market'
	import { deleteCafeActivity } from '@/api/market'
	import $ from 'jquery'
	import { setCookie, getCookie } from '@/assets/js/cookie'
	export default {
		name: 'market',
		data() {
			return {
				value1: '', //营销类型
				value2: '', //状态
				value3: '', //门店
				input1: '', //关键字
				options1: [{
					value: 4180228,
					label: '买一送一'
				}, {
					value: 4180225,
					label: '买二送一'
				}],
				options2: [{
					value: 1,
					label: '启用'
				}, {
					value: 0,
					label: '停用'
				}],
				options3: [], //所有门店
				tableDatas: [],
				page: 1, //当前页数
				pageSize: 6, //每页显示的数目
				selectArr: [], //已选择的数组集合   
				loading: true,
				datas: '', //数据对象
				arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
                disA: false, //下拉框是否禁用
			}
		},
		computed: {
			//请求参数
			objs() {
				let obj = {};
				//营销类型
				if(this.value1 === 4180228) {
					obj.ACT_TYPE = 4180228;
				} else if(this.value1 === 4180225) {
					obj.ACT_TYPE = 4180225;
				}
				//状态
				if(this.value2 === 0) {
					obj.IS_USE = 0;
				} else if(this.value2 === 1) {
					obj.IS_USE = 1;
				}
				//营销名称
				if(this.input1 != '') {
					obj.ACT_NAME = this.input1;
				}
				//门店				
				if(this.value3 && this.value3 !== 'QB'){
                	obj.COMP_ID = this.value3;
                }
				obj.PAGE_NO = this.page;
				obj.PAGE_SIZE = this.pageSize;
				return obj;
			},			 
			//分页数据
			actList() {				
				if(this.datas.CAFE_ACTIVITY_LIST) {
					return this.datas.CAFE_ACTIVITY_LIST;
				}
			}
		},
		created() {
			/* ----------权限管理---------- */
            if(getCookie('compId') !== 0) {
            	this.disA = true;
                let self = this;                
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {                    
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');                    
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {
                    	console.log(0);
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------                    
                })
            }
            /* ----------权限管理---------- */			
			//获取所有4s咖啡门店
			get4SCafeShopList().then(res => {
				if(res.data.STATUS_CODE === 1) {
					this.options3 = res.data.SHOP_LIST;
					//门店列表增加 全部 二字
                    this.options3.unshift({
                    	COMP_ID:'QB',
                    	SHOP_NAME:'全部'
                    });
                    if(getCookie('compId')) {
                        this.value3 = getCookie('compId')
                    } else {
                        this.value3 = res.SHOP_LIST[0].COMP_ID;
                    }
                    this.getList();
				}
			});
		},
		methods: {
			//活动专题列表
			getList(){
				this.loading = true;									
				this.$axiosPost('/4SCAFE/CafeActivitySystem/getCafeActivityList.action', this.objs).then(res => {
					if(res.STATUS_CODE === 1) {
						this.loading = false;
						this.datas = res;
					}
				})
			},
			//停用、启用
			editStatus(id, status) {
				let obj = {};
				obj.CAFE_ACTIVITY_Id = id;
				obj.IS_USE = status == 1 ? 0 : 1;
				updateIsUseByCafeActivityId(obj).then(res => {
					if(res.data.STATUS_CODE === 1) {
						for(let i = 0; i < this.actList.length; i++) {
							if(this.actList[i].CAFE_ACTIVITY_Id == id) {
								if(this.actList[i].IS_USE == 1) {									
									this.$set(this.actList[i], 'IS_USE', 0);
								} else {									
									this.$set(this.actList[i], 'IS_USE', 1);
								}
								this.$message({
									type: 'success',
									message: '状态已改变'
								});
							}
						}
					}
				})
			},
			handleSelectionChange(val) {
				this.selectArr = val;
			},
			handleSizeChange(val) {
				this.loading = true;
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.loading = true;
				this.page = Number(val);
				this.getList();
			},
			//新增营销
			goAdd() {
				this.$router.push({
					path: '/functions/addMarket'
				});
			},
			//查询
			querys() {
				this.getList();
			},
			//重置
			resets() {
				this.input1 = this.value1 = this.value2 = this.value3 = '';
			},
			//编辑
			goEdits(id) {
				this.$router.push({
					path: '/functions/editMarket/' + id
				});
			},
			//删除
			goDels(id) {
				deleteCafeActivity(id).then(res => {
					if(res.data.STATUS_CODE === 1) {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						for(let i = 0; i < this.actList.length; i++) {
							if(this.actList[i].CAFE_ACTIVITY_Id == id) {
								this.actList.splice(i, 1);
							}
						}
					}
				});
			},
		},		
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.market {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.contents {
			width: 97%;
			margin: 25px auto;
			padding: 25px;
			background: #fff;
			.conditions {
				span {
					white-space: nowrap;
				}
				.condition_1 {
					display: flex;
					.status {
						margin: 0 35px;
					}
				}
				.condition_2 {
					display: flex;
					margin: 20px;
					.keywords {
						display: flex;
						align-items: center;
						.el-input {
							width: 210px;
						}
					}
					.stores {
						margin: 0 35px;
					}
				}
				.selected {
					margin-top: 15px;
					border: 1px solid #f0f0f0;
					border-radius: 5px;
					background: #fafafa;
					p {
						display: flex;
						align-items: center;
						img {
							width: 20px;
							height: 20px;
							margin: 0 10px;
						}
						span {
							font-size: 16px;
							color: #717a7d;
							label {
								color: #e7251a;
							}
						}
					}
				}
				.tables {
					margin-top: 15px;
					.el-pagination {
						text-align: center;
						margin-top: 30px;
					}
					.editStatus, .edits, .dels {
						color: #1d93ff;
						cursor: pointer;
						margin: 0 2px;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
</style>